<script setup>
defineProps({
  icon: Object,
  title: String,
  desc:String
})
</script>
<template>
  <div class="card">
      <div class="card-header" v-if="title">
        <div>
          <el-icon style="margin-right:3px;translate: 0 2px">
            <component :is="icon"/>
          </el-icon>
          {{title}}
        </div>

        <div>
          <div>{{desc}}</div>
        </div>

      </div>
      <slot/>
  </div>
</template>



<style scoped>
.card {
  border-radius: 5px;
  background-color: var(--el-bg-color);
  border: solid 1px var(--el-border-color);
  box-sizing: border-box;
  min-height: 20px;
  padding: 10px;
}
.card-header {
  border-bottom: solid 1px var(--el-border-color);
  padding-bottom: 10px;
  margin-bottom: 10px;}
.card-header > :first-child {
  font-size: 18px;
  font-weight: bold;
}
.card-header > :last-child {
  font-size: 13px;
  color: grey;
}

</style>